<!DOCTYPE html>
<html>

<head>
    <title>
        Item List
    </title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript"></script>
</head>

<body>
    <% include ../topbar/topbar.html %>
    <h3>Item List</h3>
    <hr>
    <form>
        <select name='category' onchange='categorySelected(this.value)'>
            <% for(var i=0; i<data.cateData.length; i++) { %>
            <option value='<%= data.cateData[i].content %>'><%= data.cateData[i].content %></option>
            <% } %>

        </select>

        <div id='item-data'>

        </div>
    </form>

    <script>

        async function categorySelected(data) {
            try {
                const shopdata = await shop_sub(data);
                const container = document.getElementById('item-data');

                for (var i = 0; i < shopdata[0].length; i++) {
                    var data = [];
                    data[i] = shopdata[0][i];
                    result = JSON.stringify(data[i]);
                    console.log('data[i]', data[i]);
                    var template =
                        `<form method='post' action='/item_detail'>` +
                        `<img src='/media/itemimages/${data[i].item_img}' width="60px" height="60px">` +
                        `<button type='submit'>` +
                        `판매자 :  ${data[i].user}` +
                        `상품명: ${data[i].item_name}` +
                        `상품 가격: ${data[i].item_price} ` +
                        `<input type='hidden' name='data' value='${result}'>` +
                        `</button>` +
                        `</form>`;
                    const e = document.createElement('p');
                    e.innerHTML = template;
                    container.appendChild(e);
                }
            } catch (err) {
                console.log('categorySelected java Err');
            }
        }

        async function shop_sub(data) {
            try {
                const response = await fetch(`http://localhost:3000/shop_sub`, {
                    method: 'POST',
                    headers: {
                        "Content-Type": 'application/json'
                    },
                    body: JSON.stringify({ 'category': data })

                });
                var dataResult = await response.json();
                return dataResult;
            } catch (err) {
                console.log('shop_sub java Err')
            }

        }

    </script>
</body>

</html>